<template>
  <view class="user-item">
    <!-- 用户头像，添加点击事件 -->
    <u-avatar :size="60" :src="user.avatar" shape="circle" @click="goToUserDetail"/>

    <!-- 用户信息，添加点击事件 -->
    <view class="user-info" @click="goToUserDetail">
      <view class="user-basic">
        <text class="nickname">{{ user.nickname || '未设置昵称' }}</text>
        <u-icon
            :name="user.sex === 1 ? 'man' : 'woman'"
            size="18"
            :color="user.sex === 1 ? '#36BFFA' : '#FF80BF'"
        />
      </view>
      <text class="signature">{{ user.appraise || '暂无个性签名' }}</text>
      <text class="signature" v-if="user.commonFriendCount > 0 && listType == 'recommend'">
        ⭐{{ user.commonFriendCount }}位共同好友
      </text>
      <text class="signature" v-if="user.likeCount != null && listType == 'recommend'"> ✨获赞数{{ user.likeCount }}
      </text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-btn">
      <!-- 关注列表-已关注按钮 -->
      <up-button
          v-if="listType === 'follow' && user.isFollowed &&!user.isMutual"
          size="mini"
          type="primary"
          color="#95EC69"
          throttleTime="1000"
          @click="handleUnfollow"
      >
        已关注
      </up-button>
      <!-- 关注列表-互相关注按钮 -->
      <up-button
          v-if="listType === 'follow' && user.isMutual"
          size="mini"
          type="primary"
          color="#95EC69"
          throttleTime="1000"
          @click="handleUnfollow"
      >
        互相关注
      </up-button>
      <!-- 粉丝列表-回关按钮 -->
      <up-button
          v-if="listType === 'fan' &&!user.isFollowed"
          size="mini"
          type="primary"
          color="#95EC69"
          throttleTime="1000"
          @click="handleFollow"
      >
        回关
      </up-button>
      <!-- 粉丝列表-互相关注按钮 -->
      <up-button
          v-if="listType === 'fan' && user.isMutual"
          size="mini"
          type="primary"
          color="#95EC69"
          throttleTime="1000"
          @click="handleUnfollow"
      >
        互相关注
      </up-button>
      <!-- 粉丝列表-互相关注按钮 -->
      <up-button
          v-if="listType === 'recommend'"
          size="mini"
          type="primary"
          color="#95EC69"
          throttleTime="1000"
          @click="handleFollow"
      >
        关注
      </up-button>
      <view v-if="isSelf" class="self-tag">我</view>
    </view>
  </view>
</template>

<script setup>
import {ref, defineProps, defineEmits} from 'vue';
import {followUser, unFollowUser} from '../../apis/userAPI';

// 接收用户数据和操作类型
const props = defineProps({
  user: {
    type: Object,
    required: true
  },
  showFollowBtn: {
    type: Boolean,
    default: true
  },
  listType: {
    type: String,
    default: ''
  }
});

// console.log('接收父组件的user:', props.user)

// 发出事件
const emits = defineEmits(['follow', 'unfollow']);

// 获取用户ID
const userInfoStorage = uni.getStorageSync('userInfo');

// 判断是否是当前用户
const isSelf = ref(props.user.userId === userInfoStorage.userId);

// 跳转到用户详情页
const goToUserDetail = () => {
  if (!isSelf.value) {
    uni.navigateTo({
      url: `/pages/profile/profile?userId=${props.user.userId}`
    });
  }
};

// 关注用户
const handleFollow = async () => {
  emits('follow', props.user.userId);

  const requestData = {
    userId: userInfoStorage.userId,
    targetId: props.user.userId
  };

  const res = await followUser(requestData);

  if (res.statusCode === 200 && res.data.code === 200) {
    uni.showToast({
      title: '关注成功',
      icon: 'none'
    });
  } else {
    uni.showToast({
      title: '关注失败',
      icon: 'none'
    });
    console.error('关注用户失败:', res);
    throw new Error('关注用户失败');
  }
};

// 取消关注
const handleUnfollow = async () => {
  emits('unfollow', props.user.userId);
  const requestData = {
    userId: userInfoStorage.userId,
    targetId: props.user.userId
  };

  const res = await unFollowUser(requestData);

  if (res.statusCode === 200 && res.data.code === 200) {
    uni.showToast({
      title: '取消关注成功',
      icon: 'none'
    });
  } else {
    uni.showToast({
      title: '取消关注失败',
      icon: 'none'
    });
    console.error('取消关注用户失败:', res);
    throw new Error('取消关注用户失败');
  }
};
</script>

<style lang="scss" scoped>
.user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 15rpx;

  .user-info {
    flex: 1;
    margin-left: 15rpx;

    .user-basic {
      display: flex;
      align-items: center;

      .nickname {
        font-size: 28rpx;
        font-weight: 500;
        margin-right: 10rpx;
      }
    }

    .signature {
      font-size: 22rpx;
      color: #666;
      margin-top: 5rpx;
      max-width: 400rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .action-btn {
    .self-tag {
      font-size: 22rpx;
      color: #999;
      padding: 5rpx 15rpx;
      border: 1rpx solid #eee;
      border-radius: 20rpx;
    }
  }
}
</style>